<template>
    <div>

        <!--导航栏-->
        <div style="position: fixed;z-index: 10;width: 100%">
            <van-nav-bar  :title="title" left-text="" left-arrow @click-left="onClickLeft()">
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div style="height: 50px"></div>

        <div v-for="item in address" style="margin: 10px 10px" @click="onSelect(item)">
            <van-row type="flex" justify="space-around">
                <van-col span="16">
                    <div>name:{{item.name}}</div>
                    <div>tel:{{item.tel}}</div>
                    <div>address:{{item.address}}</div>
                </van-col>
                <van-col span="2">
                    <van-button round type="info" icon="edit" @click="onEdit(item)"></van-button>
                </van-col>
                <van-col span="2">
                    <van-button round type="info" icon="delete" @click="onDel(item)"></van-button>
                </van-col>
            </van-row>


        </div>

        <van-button round type="info" size="large" @click="onAdd">新增地址</van-button>

    </div>
</template>

<script>
    import { Dialog } from 'vant';
    export default {
        name: "AddressList",
        data() {
            return {
                title: 'AddressList',
                chosenAddressId: '1',
                address:[],
                from: '',
            };
        },
        methods: {
            onClickLeft(){
                this.$router.back();
            },
            onSelect(address) {
                // console.log(address);
                this.$store.state.address = address;
                // console.log(this.from);
                if(this.from.path == '/order'){
                    console.log(this.$store.state.address);
                    this.$router.back();
                }
            },
            onEdit(address){
                this.$router.push({
                    path:'/addressEdit',
                    query:{
                        address
                    }
                })
            },
            onAdd() {
                this.$router.push('/addressEdit')
            },
            onDel(address){
                Dialog.confirm({
                    title: '删除地址',
                    message: '你确定要删除'+address.address+'地址吗？',
                }).then(() => {
                    this.$axios.post("/delAddress",{
                        id:address.id
                    }).then(res=>{
                        if(res.data.code == 200){
                            for (let i in this.address) {
                                if(this.address[i].id == address.id){
                                    this.address.splice(i,1);
                                }
                            }
                        } else {
                            console.log(res.data.message);
                        }
                    })
                }).catch(() => {});
            }
        },
        mounted() {
            console.log("==>AddressList");
            this.$axios.post('/findAddress',{
                buyerId:this.$store.state.buyerId
            }).then(res=>{
                // console.log(res.data);
                this.address = res.data
            })
        },
        beforeRouteEnter(to,from,next){
            next(vm=>{
                vm.from = from;
            })
        }

    }
</script>

<style scoped>

</style>